<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" >

<title>Vue笔记（5） | 没想好的个人博客</title>

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

<!-- <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"> -->
   <!-- Font Awesome CSS-->
   <link href="https://cdn.bootcss.com/font-awesome/5.13.0/css/all.css" rel="stylesheet">

   <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/5.7.2/css/all.min.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

<link rel="shortcut icon" href="https://shixixiyue.gitee.io//favicon.ico?v=1709791195950">
<link rel="stylesheet" href="https://shixixiyue.gitee.io//styles/main.css">



<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<script src="https://jsd.onmicrosoft.cn/npm/vue/dist/vue.js"></script>


<style>
  .hljs-ln{
    padding-bottom: 1.2rem;
    margin: 0rem !important;
  }
  .hljs-ln td {
    border: none !important;
    padding: 2px 6px !important;
    line-height: 1.2rem;
    font-size: 1rem;
  }
  .hljs-ln tr td:first-child  {
    color: cadetblue;
    border-right: 1px solid !important;
  }
  .hljs-ln tr {
    border: none !important;
  }
</style>

    <meta name="description" content="
杂项









1. flex: 1导致 height:100%无效
2. createElement方法
3. 动态的v-model








1. flex: 1导致 height:100%无效
flex:1 的 pos..." />
    <meta name="keywords" content="Vue笔记" />
  </head>
  <body>
    <div id="app" class="main">

      <div class="sidebar" :class="{ 'full-height': menuVisible }">
  <div class="top-container" data-aos="fade-right">
    <div class="top-header-container">
      <a class="site-title-container" href="https://shixixiyue.gitee.io/">
        <img src="https://shixixiyue.gitee.io//images/avatar.png?v=1709791195950" class="site-logo">
        <h1 class="site-title">没想好的个人博客</h1>
      </a>
      <div class="menu-btn" @click="menuVisible = !menuVisible">
        <div class="line"></div>
      </div>
    </div>
    <div>
      
        
          <a href="https://shixixiyue.gitee.io/" class="site-nav">
            首页
          </a>
        
      
        
          <a href="https://shixixiyue.gitee.io//tag/4gOKry8Qv/" class="site-nav">
            .Net Core
          </a>
        
      
        
          <a href="https://shixixiyue.gitee.io//tag/njETBpqXu/" class="site-nav">
            FineUICore
          </a>
        
      
        
          <a href="https://shixixiyue.gitee.io//tag/XyXyeLOBB" class="site-nav">
            读书笔记
          </a>
        
      
        
          <a href="https://shixixiyue.gitee.io//tag/TyVX6hfCJ" class="site-nav">
            Vue笔记
          </a>
        
      
        
          <a href="https://shixixiyue.gitee.io//tag/3Hz2sPtzO/" class="site-nav">
            产品
          </a>
        
      
        
          <a href="https://shixixiyue.gitee.io//tag/Db1wShB_E" class="site-nav">
            其他
          </a>
        
      
        
          <a href="https://shixixiyue.gitee.io/" class="site-nav">
            一一一一一一一一一
          </a>
        
      
        
          <a href="https://shixixiyue.gitee.io//archives" class="site-nav">
            文章归档
          </a>
        
      
        
          <a href="https://shixixiyue.gitee.io//tags" class="site-nav">
            全部标签
          </a>
        
      
    </div>
  </div>
  <div class="bottom-container" data-aos="flip-up" data-aos-offset="0">
    <div class="social-container">
      
        
      
        
      
        
      
        
      
        
      
    </div>
    <div class="site-description">
      没事啥都说
    </div>
    <div class="site-footer">
      QQ：<a href="tencent://message/?uin=935732994&Site=''&Menu=yes">935732994<a/> <a href="http://beian.miit.gov.cn">京ICP备2024045283号<a/> | <a class="rss" href="https://shixixiyue.gitee.io//atom.xml" target="_blank">RSS</a>
    </div>
  </div>
</div>


      <div class="main-container">
        <div class="content-container" data-aos="fade-up">
          <div class="post-detail">
            <h2 class="post-title">Vue笔记（5）</h2>
            <div class="post-date">2020-06-08
            
                
                  <a href="https://shixixiyue.gitee.io/tag/TyVX6hfCJ/" class="tag">
                    Vue笔记
                  </a>
                
            </div>
            
            <div class="post-content" v-pre>
              <blockquote>
<p>杂项</p>
</blockquote>
<!-- more -->
<p><ul class="markdownIt-TOC">
<li>
<ul>
<li>
<ul>
<li>
<ul>
<li><a href="#1-flex-1%E5%AF%BC%E8%87%B4-height100%E6%97%A0%E6%95%88">1. flex: 1导致 height:100%无效</a></li>
<li><a href="#2-createelement%E6%96%B9%E6%B3%95">2. createElement方法</a></li>
<li><a href="#3-%E5%8A%A8%E6%80%81%E7%9A%84v-model">3. 动态的v-model</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</p>
<h4 id="1-flex-1导致-height100无效">1. flex: 1导致 height:100%无效</h4>
<p>flex:1 的 position=relative 子的 position=absolute</p>
<pre><code>{
    flex: 1;
    position: relative;

    &gt; {
        position: absolute;
    }
}
</code></pre>
<h4 id="2-createelement方法">2. createElement方法</h4>
<p>props为组件属性，其中属性要满足驼峰写法，如果使用了$attrs继承，也要使用驼峰写法</p>
<p>绘制时</p>
<pre><code>render(h){
    h('el-form',{
        props: {
          labelWidth: &quot;100px&quot;,
          labelPosition: &quot;left&quot;,
          //属性 等同于 v-bind=&quot;$attrs&quot;
          ...this.$attrs
        }
    })
}
</code></pre>
<p>调用时</p>
<pre><code>&lt;el-form labelWidth=&quot;120px&quot;&gt;&lt;/el-form&gt;
</code></pre>
<h4 id="3-动态的v-model">3. 动态的v-model</h4>
<p>如果v-model绑定的是动态的，不是data中初始的，需要重新赋值data才能监听到触发重新绘制</p>
<pre><code> &lt;el-input v-model=&quot;form[A1_160]&quot;&gt;&lt;/el-input&gt;
</code></pre>
<pre><code>{
  data() {
    return {
        form:{}
    }
  },
  ...
  change(){
      //这样不可以
      //this.form[A1_160] = &quot;xxx&quot;;
      //直接赋值
      this.form = Object.assign({},{
          [A1_160]:&quot;xxx&quot;
      });
  }
}
</code></pre>

            </div>
            
              <div class="tag-container">
                
                  <a href="https://shixixiyue.gitee.io/tag/TyVX6hfCJ/" class="tag">
                    Vue笔记
                  </a>
                
              </div>
            
            
              <div class="next-post">
                <div class="next">下一篇</div>
                <a href="https://shixixiyue.gitee.io/vue-bi-ji-4/">
                  <h3 class="post-title">
                    Vue笔记（4）
                  </h3>
                </a>
              </div>
            

            

          </div>

        </div>
      </div>
    </div>

    <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script type="application/javascript">

AOS.init();

var app = new Vue({
  el: '#app',
  data: {
    menuVisible: false,
  },
})

</script>


  <script src="//jsd.onmicrosoft.cn/gh/highlightjs/cdn-release@11.5.1/build/highlight.min.js"></script>
  <script>
    hljs.initHighlightingOnLoad();
    //hljs.registerLanguage('mermaid', window.hljsDefineMermaid);
  </script>
  <script src="//jsd.onmicrosoft.cn/npm/highlightjs-line-numbers.js@2.8.0/dist/highlightjs-line-numbers.min.js"></script>
  <script>
    hljs.initLineNumbersOnLoad({
      singleLine: true
    });
  </script>
 <script src="https://jsd.onmicrosoft.cn/npm/mermaid/dist/mermaid.min.js"></script>
   <script>
    mermaid.initialize({
      startOnLoad: true,
      securityLevel: 'loose',
    });
  </script>





  </body>
</html>
